探索泡泡背景的設計秘訣，讓訪客愛上您的網站

嗨！是不是常常看著很多網站，總覺得它們少了點什麼？別再只滿足於單調的網頁背景了，我們需要一點「哇～好好玩！」的感覺！

今天就來跟大家聊聊，如何用 Vue.js 為網站加點魔法——用泡泡背景讓你的頁面瞬間療癒靈動起來，吸引訪客的目光。
不僅僅是視覺上更美麗，這些泡泡還能讓整個網站的氛圍變得更生動可愛。

在網頁設計中，背景動效是提升視覺吸引力的關鍵。
它能為網站增添層次感與動態效果，帶給訪客沉浸式的瀏覽體驗。
這篇文章將帶你深入了解如何用 Vue.js 進行背景動效設計，並透過實戰程式碼，教你一步步實現這些有趣的效果！

打造靈動視覺：一步步帶你玩轉泡泡背景動效

• 背景設計：選用淡藍色漸變作為背景，營造出輕柔且清新療癒的視覺效果，完美融入泡泡的動態設計。
• 隨機泡泡生成：使用 v-for 動態生成 50 個泡泡，每個泡泡的大小、位置、和運動速度皆為隨機設定，使畫面更加生動。
• 動態動畫插入：透過 insertKeyframes 函數，為每個泡泡生成獨立的動畫軌跡，創造出不斷浮動、變化的視覺效果，讓背景不再單調。

網頁設計中的背景類型有哪些？

1. 顏色背景類
包含：漸變背景、純色背景

• 此類背景以顏色為主軸，透過精心選擇與搭配不同的色彩，打造出簡約、現代或獨特的視覺風格。無論是營造乾淨的設計感還是強調品牌的色彩識別，這類背景都能突出網站的核心美學。

2. 圖案與圖形背景類
包含：圖形背景、帶有圖案的背景、帶紋理的背景

• 利用插畫、抽象圖形、重複圖案或紋理質感，這類背景不僅增加視覺的深度與層次感，還能有效傳達品牌故事。它們能夠與網站其他元素相得益彰，為設計增添趣味與個性，讓整體風格更加豐富。

3. 動態與影像背景類
包含：動畫背景、攝影背景、全螢幕背景

• 動態效果或高品質影像的背景能夠創造強烈的視覺衝擊與互動感，為訪客帶來沉浸式的體驗。這些背景類型適合展示品牌故事、強調設計主題，或在頁面上創造一個生動而引人注目的視覺焦點。

這三大背景類型讓我們能夠根據設計需求靈活選擇，不僅僅是裝飾，更能成為網站視覺效果和使用者體驗的重要一環。

背景動效的設計與實戰實作

這次，我們要帶你用 Vue.js 和 TypeScript 來打造一個超療癒的泡泡背景動畫！
這種柔和、清新的設計風格不僅讓網站變得更有層次感，還能增添一種彷彿置身水中的輕盈感，既有趣又不會喧賓奪主。
趕快看看這些步驟，讓你的網頁也能「冒泡泡」吧！

• 設計風格：我們選用了柔和的漸變背景，搭配隨機生成的泡泡動畫，營造出水中氣泡上浮的感覺，整個畫面立刻靈動起來！

• 動效實現：透過 TypeScript，動態生成 CSS @keyframes 規則，讓每顆泡泡都有自己獨特的運動軌跡，隨著節奏自由浮動，不斷變化。

• 完整程式碼

  <script setup lang="ts">
  import { CSSProperties, onMounted } from 'vue';
  
  // 生成隨機數函數，決定泡泡的尺寸、位置、運動速度
  const generateRandom = (min: number, max: number): number =>
    Math.floor(Math.random() * (max - min + 1)) + min;
  
    // 為每個泡泡生成樣式
  const generateBubbleStyle = (index: number): CSSProperties => {
    const bgpos = index % 2 === 0 ? 'top right' : 'center';
    const width = `${generateRandom(5, 100)}px`;
    const left = `${generateRandom(1, 100)}vw`;
    const bottom = `${generateRandom(1, 100)}vh`;
    const duration = `${generateRandom(3, 15)}s`;
  
    return {
        background: `radial-gradient(ellipse at ${bgpos}, #d9e7f1 0%, #b3cde0 46%, #72bde2 100%)`,
        width: width,
      height: width,
      left: left,
      bottom: bottom,
      position: 'absolute',
      borderRadius: '100%',
      opacity: '0.8',
      animation: `move${index} ${duration} infinite`,
    };
  };
  
  // 動態生成 keyframes 規則並插入到頁面
  const insertKeyframes = (index: number) => {
    const styleSheet = document.styleSheets[0];
    const randomBottom = generateRandom(0, 100);
    const randomTranslate = generateRandom(-100, 200);
  
    const keyframes = `
      @keyframes move${index} {
        0% {
          bottom: -100px;
        }
        100% {
          bottom: ${randomBottom}vh;
          transform: translate(${randomTranslate}px, 0);
          opacity: 0;
        }
      }
    `;
  
    styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
  };
  
  // 初始化時為每個泡泡生成動畫規則
  onMounted(() => {
    for (let i = 1; i <= 50; i++) {
      insertKeyframes(i);
    }
  });
  </script>
  
  <template>
<div class="h-screen w-screen bg-gradient-to-b from-[#e6f2f8] to-[#94c9e4] relative overflow-hidden">
    <div
        v-for="index in 50"
        :key="index"
        :class="['bubble', 'block', 'absolute', 'rounded-full', 'opacity-80']"
        :style="generateBubbleStyle(index)"
      ></div>
    </div>
  </template>
  
  <style scoped>
  </style>
  

背景設計

• 背景漸層：我們選用淡藍色的漸變作為背景，從 #e6f2f8 到 #94c9e4，這樣的漸層色調營造出一種輕柔、清新的視覺效果，讓整體畫面感覺舒適、自然。

• 這個背景不僅提供了柔和的襯托，也提升了泡泡的動態效果。

• 輕鬆實現：我們可以利用UnoCSS簡單設置漸層

  • 使用 bg-gradient-to-b 來設置漸層方向。
  • 使用 from-[顏色] 設置起始色彩
  • 使用 to-[顏色] 設置結束色彩。

  <div class="h-screen w-screen bg-gradient-to-b from-[#e6f2f8] to-[#94c9e4] relative overflow-hidden">
  

隨機泡泡生成

• 隨機化設計：透過 Vue 的 v-for 指令，我們動態生成了 50 個泡泡，每個泡泡的尺寸、位置、透明度和動畫速度都是隨機的，利用 generateRandom 函數生成範圍內的隨機數，確保每次的呈現都不相同。

  // 生成隨機數函數，決定泡泡的尺寸、位置、運動速度
  const generateRandom = (min: number, max: number): number =>
    Math.floor(Math.random() * (max - min + 1)) + min;
  

• 樣式設定：每個泡泡的樣式由 generateBubbleStyle 函數控制。這些樣式包括背景漸層、隨機大小、位置和動畫設定，讓泡泡的出現充滿了變化和驚喜。

  // 為每個泡泡生成樣式
  const generateBubbleStyle = (index: number): CSSProperties => {
    const bgpos = index % 2 === 0 ? 'top right' : 'center';
    const width = `${generateRandom(5, 100)}px`;
    const left = `${generateRandom(1, 100)}vw`;
    const bottom = `${generateRandom(1, 100)}vh`;
    const duration = `${generateRandom(3, 15)}s`;
  
    return {
      background: `radial-gradient(ellipse at ${bgpos}, #d9e7f1 0%, #b3cde0 46%, #72bde2 100%)`,
      width: width,
      height: width,
      left: left,
      bottom: bottom,
      position: 'absolute',
      borderRadius: '100%',
      opacity: '0.8',
      animation: `move${index} ${duration} infinite`,
    };
  };
  

動態動畫插入

• 動畫生成：透過 insertKeyframes 函數，我們使用 TypeScript 動態生成 CSS @keyframes 規則。

• 這些規則會為每個泡泡創造獨特的運動軌跡，讓每顆泡泡都以不同的方式漂浮和消失。

  // 動態生成 keyframes 規則並插入到頁面
  const insertKeyframes = (index: number) => {
    const styleSheet = document.styleSheets[0];
    const randomBottom = generateRandom(0, 100);
    const randomTranslate = generateRandom(-100, 200);
  
    const keyframes = `
      @keyframes move${index} {
        0% {
          bottom: -100px;
        }
        100% {
          bottom: ${randomBottom}vh;
          transform: translate(${randomTranslate}px, 0);
          opacity: 0;
        }
      }
    `;
  
    styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
  };
  

• 運動軌跡：在這些動效中，每個泡泡的軌跡和運動速度都不一樣，這樣的設計讓每次訪問網站時的視覺效果都與眾不同。

• 動效初始化：透過 onMounted 生命週期鉤子，我們為每個泡泡生成並插入對應的動效規則。這樣一來，背景的動態效果會隨著頁面加載立即生效。

  // 這裡可以設定泡泡的數量
  onMounted(() => {
    for (let i = 1; i <= 50; i++) {
      insertKeyframes(i);
    }
  });
  

總結

1. 學會使用 Vue.js 打造動態背景設計

   • 透過實戰程式碼，學習如何用 Vue.js 結合 UnoCSS 和 TypeScript，創造出富有層次感的泡泡背景動效，是不是很有趣？

2. 隨機生成與個性化動畫技術

   • 學會如何使用 v-for 指令與 TypeScript 的隨機數生成方法，動態設計每個泡泡的大小、位置、速度，並為每個泡泡生成獨特的動畫軌跡，打造專屬於自己網站的獨特背景動效。

3. 增強視覺吸引力與使用者視覺體驗

   • 輕鬆掌握背景動效的應用技巧，提升網站的視覺吸引力與互動性。
   • 透過靈動的設計讓訪客更願意停留，進而提升整體用戶體驗，讓網站不再只是靜態的展示，而是充滿活力的視覺享受！

快來挑戰一下自己，讓你的網站也充滿這些可愛的小泡泡吧！ （〜^∇^)〜